<template>
	<view>
		<uni-swipe-action>
			<block v-for="(item, index) in list" :key="index">
				<!-- 使用插槽 （请自行给定插槽内容宽度）-->
				<uni-swipe-action-item :right-options="options" @click="onClick($event, index)" @change="swipeChange($event, index)">
					<view class="d-flex flex-1 a-center"
					@click="choose(item)">
						<view class="text-secondary ml-2 border-bottom a-center">
							<view class="d-flex a-center">
								<text class="main-text-color mr-1">{{ item.name }}</text>
								<text class="mr-1">{{ item.phone }}</text>
								<text class="main-text-color" v-if="item.isdefault">[默认]</text>
							</view>
							<view>
								<text>{{ item.path }}</text>
							</view>
							<view>
								<text>{{ item.detailPath }}</text>
							</view>
						</view>
						<view class="ml-auto mr-2 text-center text-muted a-center">
							<text>左滑<-</text>
						</view>
					</view>
					
				
				</uni-swipe-action-item>
			</block>
		</uni-swipe-action>
	</view>
</template>

<script>
import uniSwipeAction from '@/components/uni-ui/uni-swipe-action/uni-swipe-action.vue';
import uniSwipeActionItem from '@/components/uni-ui/uni-swipe-action-item/uni-swipe-action-item.vue';
import { mapState, mapMutations } from 'vuex';

export default {
	components: {
		uniSwipeAction,
		uniSwipeActionItem
	},
	
	//加载时
	onLoad(e) {
		if (e.type === 'choose') {
			this.isChoose = true
		}
	},

	data() {
		return {
			isChoose: false,
			options: [
				{
					text: '修改',
					style: {
						backgroundColor: '#007aff'
					}
				},
				{
					text: '删除',
					style: {
						backgroundColor: '#dd524d'
					}
				}
			]
		};
	},
	methods: {
		...mapMutations(['delPath']),
		
		onClick(e, i) {
			switch (e.index) {
				case 0: //修改
					let obj = JSON.stringify({
						index: i,
						item: this.list[i]
					})
					uni.navigateTo({
						url: '../user-path-edit/user-path-edit?data='+ obj
					});
					break;
				case 1: //删除
					uni.showModal({
						content: '要删除该地址吗?',
						showCancel: true,
						success: res => {
							if(res.confirm) {
								this.delPath(i)
								uni.showToast({
									title: '删除成功'
								});
							}
						}
					});
					break;
			}
		},
		swipeChange(e, index) {
			console.log('当前状态：' + e + '，下标：' + index);
		},
		
		//点击选择地址
		choose(item) {
			if (this.isChoose) {
				//通知订单提交页修改地址
				uni.$emit('choosePath', item)
				//返回
				uni.navigateBack({
					delta: 1
				})
			}
		}
	},
	//监听导航栏按钮点击
	onNavigationBarButtonTap(e) {
		if (e.index === 0) {
			uni.navigateTo({
				url: '../user-path-edit/user-path-edit'
			});
		}
	},

	computed: {
		...mapState({
			list: state => state.path.list
		})
	}
};
</script>

<style></style>
